<template>
  <div class="dagre-con">
    <div class="dc-tip">
      <p class="flex"><span class="s"></span><span>上游</span></p>
      <p class="flex"><span class="z"></span><span>中游</span></p>
      <p class="flex"><span class="x"></span><span>下游</span></p>
    </div>
    <div class="zoom flex">
      <img
        src="@/assets/img/IC/small.svg"
        @click="handleZoom('small')"
        title="缩小"
      />
      <img
        src="@/assets/img/IC/100.svg"
        @click="handleZoom('100')"
        title="100%"
      />
      <img
        src="@/assets/img/IC/big.svg"
        @click="handleZoom('big')"
        title="放大"
      />
    </div>
    <div id="dagre" class="dagre"></div>
  </div>
</template>
<script>
import G6 from "@antv/g6";
import insertCss from "insert-css";
export default {
  props: {
    tabLabel: {
      type: String,
      default: "",
    },
    status: {
      type: Boolean,
    },
  },
  watch: {
    tabLabel(newVal) {
      this.getData();
    },
    status(newVal) {
      this.handleStatus();
    },
  },
  data() {
    return {
      tree: null,
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    init(nodes, edges) {
      const data = {
        nodes: nodes,
        edges: edges,
        // nodes: [
        //   {
        //     id: "1",
        //     label: "EPC",
        //     type: "x",
        //     comboId: "combox",
        //   },
        //   {
        //     id: "11",
        //     label: "支架",
        //     type: "x",
        //     comboId: "combox",
        //   },
        //   {
        //     id: "111",
        //     label: "支架一",
        //     type: "x",
        //     comboId: "combox",
        //   },
        //   {
        //     id: "112",
        //     label: "支架二",
        //     type: "x",
        //     comboId: "combox",
        //   },
        //   {
        //     id: "12",
        //     label: "逆变器",
        //     type: "x",
        //     comboId: "combox",
        //   },
        //   {
        //     id: "13",
        //     label: "组件",
        //     type: "x",
        //     comboId: "combox",
        //   },
        //   {
        //     id: "131",
        //     label: "密封胶",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "132",
        //     label: "边框",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "133",
        //     label: "层压件",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "1331",
        //     label: "焊带",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "1332",
        //     label: "电池片",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "13321",
        //     label: "硅片",
        //     type: "s",
        //     comboId: "combos",
        //   },
        //   {
        //     id: "13322",
        //     label: "银浆",
        //     type: "s",
        //     comboId: "combos",
        //   },
        //   {
        //     id: "1333",
        //     label: "光伏玻璃",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "1334",
        //     label: "背板",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "13341",
        //     label: "PET基膜",
        //     type: "s",
        //     comboId: "combos",
        //   },
        //   {
        //     id: "13342",
        //     label: "氟膜",
        //     type: "s",
        //     comboId: "combos",
        //   },
        //   {
        //     id: "13343",
        //     label: "胶粘剂",
        //     type: "s",
        //     comboId: "combos",
        //   },
        //   {
        //     id: "1335",
        //     label: "EVA",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "134",
        //     label: "接线盒",
        //     type: "z",
        //     comboId: "comboz",
        //   },
        //   {
        //     id: "14",
        //     label: "汇流箱",
        //     type: "x",
        //     comboId: "combox",
        //   },
        //   {
        //     id: "15",
        //     label: "蓄电池",
        //     type: "x",
        //     comboId: "combox",
        //   },
        // ],
        // edges: [
        //   {
        //     source: "11",
        //     target: "1",
        //   },
        //   {
        //     source: "12",
        //     target: "1",
        //   },
        //   {
        //     source: "13",
        //     target: "1",
        //   },
        //   {
        //     source: "111",
        //     target: "11",
        //   },
        //   {
        //     source: "112",
        //     target: "11",
        //   },
        //   {
        //     source: "131",
        //     target: "13",
        //   },
        //   {
        //     source: "132",
        //     target: "13",
        //   },
        //   {
        //     source: "133",
        //     target: "13",
        //   },
        //   {
        //     source: "1331",
        //     target: "133",
        //   },
        //   {
        //     source: "1332",
        //     target: "133",
        //   },
        //   {
        //     source: "13321",
        //     target: "1332",
        //   },
        //   {
        //     source: "13322",
        //     target: "1332",
        //   },
        //   {
        //     source: "1333",
        //     target: "133",
        //   },
        //   {
        //     source: "1334",
        //     target: "133",
        //   },
        //   {
        //     source: "13341",
        //     target: "1334",
        //   },
        //   {
        //     source: "13342",
        //     target: "1334",
        //   },
        //   {
        //     source: "13343",
        //     target: "1334",
        //   },
        //   {
        //     source: "1335",
        //     target: "133",
        //   },
        //   {
        //     source: "134",
        //     target: "13",
        //   },
        //   {
        //     source: "14",
        //     target: "1",
        //   },
        //   {
        //     source: "15",
        //     target: "1",
        //   },
        // ],
        // combos: [
        //   {
        //     id: "combos",
        //     label: "上游",
        //   },
        //   {
        //     id: "comboz",
        //     label: "中游",
        //   },
        //   {
        //     id: "combox",
        //     label: "下游",
        //   },
        // ],
      };

      // define the CSS with the id of your menu
      insertCss(`
        .g6-component-contextmenu {
          padding: 5px 0;
        }
        .g6-component-contextmenu ul {
          margin: 0;
          padding: 0;
          text-align: left;
        }
        .g6-component-contextmenu ul li {
          padding: 6px 20px;
          cursor: pointer;
        }
        .g6-component-contextmenu ul li:hover {
          background-color: #EEEEEE;
        }
      `);

      const contextMenu = new G6.Menu({
        getContent(evt) {
          return `<ul>
                    <li type="first">相关专利</li>
                    <li type="second">相关机构</li>
                    <li type="three">相关专家</li>
                    <li type="four">相关资讯</li>
                  </ul>`;
        },
        handleMenuClick: (target, item) => {
          const model = item.getModel();
          // console.log(target.type, model);
          this.$emit("rightClick", model, "dagre", target.type);
        },
        // offsetX and offsetY include the padding of the parent container
        // 需要加上父级容器的 padding-left 16 与自身偏移量 10
        offsetX: 0,
        // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
        offsetY: 0,
        // the types of items that allow the menu show up
        // 在哪些类型的元素上响应
        itemTypes: ["node"],
      });

      const container = document.getElementById("dagre");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;

      this.tree = new G6.Graph({
        container: "dagre",
        width,
        height,
        fitView: true,
        plugins: [contextMenu],
        modes: {
          // "zoom-canvas"
          default: ["drag-canvas"],
        },
        groupByTypes: false,
        defaultCombo: {
          type: "rect", // Combo 类型
          style: {
            lineWidth: 2,
          },
        },
        layout: {
          type: "dagre",
          rankdir: "LR",
          align: "UL",
          nodesepFunc: () => 1,
          ranksepFunc: () => 1,
        },
        defaultEdge: {
          type: "polyline",
          // size: 1,
          color: "#e2e2e2",
          style: {
            endArrow: {
              path: "M 0,0 L 8,4 L 8,-4 Z",
              fill: "#e2e2e2",
            },
            // radius: 20,
          },
        },
        nodeStateStyles: {
          selected: {
            // 这个用在了 鼠标选中，可以自行定义
            lineWidth: 0,
            fill: "#2f41c8",
          },
        },
      });

      //
      this.tree.node((node) => {
        // console.log("node:", node.label.length);
        let wid = node.label.length > 5 ? node.label.length * 14 : 70;
        return {
          size: [wid, 30],
          type: "rect",
          style: {
            lineWidth: 0,
            fill: this.getFillColor(node.itype),
            cursor: "pointer",
          },
          labelCfg: {
            style: {
              fill: "#333",
            },
          },
        };
      });
      this.tree.data(data);
      this.tree.render();
      this.tree.fitCenter();
      // 单击树节点
      this.tree.on("node:click", (evt) => {
        const item = evt.item;
        const model = evt.item.getModel();
        this.$emit("clickNode", model, "dagre");
        setTimeout(() => {
          this.tree.getNodes().forEach((node) => {
            let getModel = node.getModel();
            // console.log("getModel", getModel);
            this.tree.updateItem(node, {
              style: {
                fill: this.getFillColor(getModel.itype),
              },
              labelCfg: {
                style: {
                  fill: "#333",
                },
              },
            });
          });
          this.tree.updateItem(item, {
            style: {
              fill: "#2f41c8",
            },
            labelCfg: {
              style: {
                fill: "#fff",
              },
            },
          });
        }, 50);
      });
      window.addEventListener("resize", () => {
        this.tree.changeSize(container.scrollWidth, container.scrollHeight);
        // this.tree.refresh();
      });
    },
    getFillColor(type) {
      // console.log("type", type);
      let fillColor = "rgb(135, 245, 124)";
      if (type == "s") {
        fillColor = "rgb(147, 210, 243)";
      } else if (type == "z") {
        fillColor = "rgb(255, 191, 107)";
      }
      return fillColor;
    },
    handleStatus() {
      setTimeout(() => {
        this.tree?.getNodes().forEach((node) => {
          let getModel = node.getModel();
          // console.log("getModel", getModel);
          this.tree.updateItem(node, {
            style: {
              fill: this.getFillColor(getModel.itype),
            },
            labelCfg: {
              style: {
                fill: "#333",
              },
            },
          });
        });
      }, 50);
    },
    calcType(attributes) {
      let type = "x";
      attributes.map((attr) => {
        if (attr.name == "产业结构") {
          if (attr.value == "上游") {
            type = "s";
          } else if (attr.value == "中游") {
            type = "z";
          }
        }
      });
      return type;
    },
    getData() {
      if (this.tree) {
        this.tree.destroy(); //这个是重点
        this.tree = null;
      }
      this.$post(this.$Url.chain.queryChain, {
        chainName: this.tabLabel,
        chainType: "CYL",
        size: 10,
      }).then((res) => {
        let data = res.data;
        if (data.node.length == 0) {
          this.$emit("showOrHideNode", {
            type: "dagre",
            status: false,
          });
          return;
        } else {
          this.$emit("showOrHideNode", {
            type: "dagre",
            status: true,
          });
        }
        const nodes = [],
          edges = [];
        data.node.map((d) => {
          let t = this.calcType(d.attributes);
          nodes.push({
            id: d.eid,
            eid: d.eid,
            label: d.name,
            itype: t,
            // comboId: `combo${t}`,
          });
        });
        data.link.map((d) => {
          edges.push({
            source: d.s_eid,
            target: d.o_eid,
          });
        });
        this.init(nodes, edges);
      });
    },
    handleZoom(type) {
      let index = 1;
      if (type == "small") {
        index = 0.8;
      } else if (type == "big") {
        index = 1.2;
      } else if (type == "100") {
        this.tree.render();
        return;
      }
      this.tree.zoom(index);
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.dagre-con {
  position: relative;
  height: 500px;
  .dc-tip {
    position: absolute;
    left: 0;
    top: 0;
    p {
      line-height: 18px;
      font-size: 12px;
    }
    span {
      display: block;
      width: 36px;
      height: 18px;
      margin-right: 10px;
      border-radius: 4px;
    }
    .s {
      background-color: rgb(147, 210, 243);
    }
    .z {
      background-color: rgb(255, 191, 107);
    }
    .x {
      background-color: rgb(135, 245, 124);
    }
  }
  .zoom {
    position: absolute;
    top: -50px;
    right: 10px;
    img {
      cursor: pointer;
      margin-right: 10px;
    }
  }
  .dagre {
    position: relative;
  }
}
</style>
